<template>
  <view class="rename-pop" v-if="visible">
    <view class="mask" v-if="visible" @click="cancelName"></view>
    <view class="content" :style="{ bottom: inputBottom }">
      <view class="favHeader">
        <view class="cancelButton" @click="cancelName">{{ cancelText }}</view>
        <view class="actionTitle">{{ title }}</view>
        <view class="confirmButton" @click="confirmName"> {{ okText }} </view>
      </view>
      <view class="favSingle" style="margin-bottom: 100rpx">
        <view
          class="nameBox commonInput"
          :class="{
            inputFocus: !newNameFocus && newNickName == '',
            rightInput: nameCorrect,
            inputError: newNameFocus && !nameCorrect,
          }"
        >
          <view class="inputBox">
            <input
              type="text"
              class="phoneBox"
              @input="editName"
              :focus="newNameFocus"
              @focus="nameFocusActive"
              @blur="nameBlur"
              :value="newNickName"
              placeholder="请输入名称"
              adjust-position="{{false}}"
              :data-type="type"
              hold-keyboard="true"
              @keyboardheightchange="keyboardheightchange"
            />
            <view class="iconBox" v-if="newNickName.length > 0" @click="deleteName">
              <image src="/static/btn_input_delete_n.png" class="showIcon" />
            </view>
          </view>
          <view class="nameHint">
            <view v-if="!newNameFocus && newNickName == ''">
              <image src="/static/icon_inputting_remind.png" class="errorIcon" />
              <view class="idError">只支持中英文、数字</view>
            </view>
            <view v-else>
              <image src="/static/icon_inputting_correct.png" class="errorIcon" v-if="nameCorrect" />
              <view v-if="nameCorrect" class="rightHint idError"> 只支持中英文、数字 </view>
              <image v-if="!nameCorrect" src="/static/icon_error_warning.png" class="errorIcon" />
              <view v-if="!nameCorrect" class="errorHint idError">
                {{ nameError }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const NAME_ERROR_LONG = '名称过长，请控制在8个字符以内'
const ROOMNAME_ERROR_LONG = '名称过长，请控制在6个字符以内'
const NAME_ERROR_INVALIDICON = '不支持特殊字符'
const NAME_ERROR_EMPTY = '请输入名称'

const props = defineProps<{
  visible: boolean
  cancelText: string
  okText: string
  title: string
  nameFocus: boolean
  nickname: string
  type?: string
}>()

const emit = defineEmits<{
  (e: 'ok', nickname: string): void
  (e: 'cancel'): void
}>()

const nameError = ref('')
const nameCorrect = ref(false)
const newNickName = ref('')
const newNameFocus = ref(false)
const inputBottom = ref('')

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      newNickName.value = props.nickname
      newNameFocus.value = props.nameFocus
      checknickname(props.nickname)
    }
  }
)

/**
 * 取消
 */
function cancelName() {
  emit('cancel')
}
/**
 * 完成
 */
function confirmName() {
  newNameFocus.value = true
  if (!nameCorrect.value) return
  emit('ok', newNickName.value)
}
function editName(e: Event) {
  newNickName.value = (e as unknown as WechatMiniprogram.Input).detail.value
  checknickname(newNickName.value)
}
/**
 * 校验名称
 */
function checknickname(name: string) {
  let maxLengthName = props.type == 'room' ? 6 : 8
  let pattern =
    props.type == 'room' ? /^[\u4E00-\u9FA5A-Za-z0-9]{0,6}$/ : /^[\u4e00-\u9fa5_a-zA-ZüöäÜÖÄß0-9!#$&;=?[\]_~%]{0,8}$/
  if (name.length == 0) {
    nameError.value = NAME_ERROR_EMPTY
    nameCorrect.value = false
  } else if (name.length > maxLengthName) {
    nameError.value = props.type == 'room' ? ROOMNAME_ERROR_LONG : NAME_ERROR_LONG
    nameCorrect.value = false
  } else {
    if (pattern.test(name)) {
      nameError.value = ''
      nameCorrect.value = true
    } else {
      nameError.value = NAME_ERROR_INVALIDICON
      nameCorrect.value = false
    }
  }
}
function nameFocusActive(d: FocusEvent) {
  newNameFocus.value = true
}
function nameBlur() {
  newNameFocus.value = false
  checknickname(newNickName.value)
}
function deleteName() {
  newNickName.value = ''
  newNameFocus.value = true
  checknickname('')
}
function keyboardheightchange(e: KeyboardEvent) {
  let height = ''
  if (e.detail.height > 0) {
    height = (e.detail.height - 30) * 2 + 'rpx'
  } else {
    height = e.detail.height + 'rpx'
  }
  inputBottom.value = height
}
</script>
<style scoped lang="less">
.rename-pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    z-index: 1009;
  }
  .content {
    position: fixed;
    width: 100%;
    height: 280rpx;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 1010;
    background-color: #fff;
  }
  .favHeader {
    height: 84rpx;
    line-height: 84rpx;
    font-size: 28rpx;
    border-bottom: 0.5px solid #dddddd;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cancelButton {
    float: left;
    padding: 0 30rpx;
    text-align: center;
    color: #131b35;
  }

  .actionTitle {
    color: #131b35;
    font-weight: bold;
  }
  .favSingle {
    padding: 0 32rpx;
  }
  .confirmButton {
    float: right;
    padding: 0 30rpx;
    text-align: center;
    color: #4475d5;
  }
  .errorIcon {
    width: 30rpx;
    height: 30rpx;
  }
  .rightInput .inputBox {
    border-bottom: 1px solid #41c38c;
  }
  .inputFocus .inputBox {
    border-bottom: 1px solid #4475d5;
  }
  .inputError .inputBox {
    border-bottom: 1px solid #c80000;
  }
  .inputError .idError {
    color: #c42929;
  }
  .rightInput .idError {
    color: #41c38c;
  }
  .inputBox {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e9ec;
    padding: 0 32rpx;
    box-sizing: border-box;
    .phoneBox {
      width: 100%;
      font-size: 28rpx;
    }
  }
  .iconBox {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .showIcon {
    width: 36rpx;
    height: 36rpx;
  }
  .nameHint {
    margin-top: 10rpx;
  }
  .nameHint > view {
    display: flex;
    align-items: center;
  }
  .idError {
    font-size: 22rpx;
    color: #656b7b;
    margin-left: 10rpx;
  }
}
</style>
